<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #traffic-light {
        width: 260px;
        height: 80px;
        background-color: black;
        border-radius: 10px;
        display: flex;

        justify-content: space-between;
        align-items: center;
    }

    .light {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .red {
        background-color: red;
    }

    .yellow {
        background-color: yellow;
    }

    .green {
        background-color: green;
    }

    .djs {
        font-size: 50px;
        font-weight: 900;
        color: aliceblue;
        text-align: center;
    }

    input {
        width: 60px;
    }

    .mask {
        opacity: 0.3;
    }
</style>

<body>
    <p>请输入红黄绿灯持续秒数</p>
    <div id="traffic-light">
        <div class="light red"></div>
        <div class="light yellow"></div>
        <div class="light green"></div>
        <div class="light djs"> 0</div>
    </div>
    <input type="text" placeholder="红" id="red">
    <input type="text" placeholder="黄" id="yellow">
    <input type="text" placeholder="绿" id="green">
    <button class="btn">开始</button>
</body>

<script>
    var a 
    var b 
    var c 
    async function trafficLight(a, b, c) {
        a = a
        b = b
        c = c
        let red = document.querySelector('.red')
        let yellow = document.querySelector('.yellow')
        let green = document.querySelector('.green')
        let djs = document.querySelector('.djs')

        let r = await new Promise((resolve, reject) => {
            setTimeout(function () {
                resolve(a)
            }, 0)
        })
        let time = setInterval(() => {

            djs.innerHTML = r
            red.classList.remove('mask')
            yellow.classList.add('mask')
            green.classList.add('mask')
            r--
        }, 1000);
        // ---------------------------------------------------
        let g = await await new Promise((resolve, reject) => {
            setTimeout(function () {
                resolve(c)
            }, (a + 1) * 1000)
        })
        clearInterval(time)
        let time2 = setInterval(() => {
            djs.innerHTML = g
            red.classList.add('mask')
            green.classList.remove('mask')
            g--
        }, 1000);

        // -----------------------------------------------------
        let y = await await await new Promise((resolve, reject) => {
            setTimeout(function () {
                resolve(b)
            }, (c + 1) * 1000)
        })
        clearInterval(time2)
        let time3 = setInterval(() => {
            if (y === 0) {
                clearInterval(time3)
                djs.innerHTML = y
                trafficLight(a,b,c)
            } else {
                djs.innerHTML = y
                yellow.classList.remove('mask')
                green.classList.add('mask')
                y--
            }
        }, 1000);


    }

    document.querySelector('.btn').addEventListener('click', function () {
        let a = + document.querySelector('#red').value
        let b = + document.querySelector('#yellow').value
        let c = + document.querySelector('#green').value
        // console.log(r, y, g);
        trafficLight(a, b, c);
    })
</script>

</html>